<template>
  <div class="system-settings-container">
    <div class="system-settings-header">
      <h2>系统设置</h2>
      <p class="system-settings-subtitle">管理博客系统的各种配置和参数</p>
    </div>

    <a-card class="system-settings-card">
      <a-tabs v-model:activeKey="activeTab" class="settings-tabs">
        <a-tab-pane key="basic" tab="基础设置">
          <a-form
            :model="systemConfig"
            :rules="systemConfigRules"
            ref="systemConfigFormRef"
            layout="vertical"
            class="system-config-form"
          >
            <div class="form-fields-container">
              <a-form-item name="siteName" label="网站名称">
                <a-input
                  v-model:value="systemConfig.siteName"
                  placeholder="请输入网站名称"
                  class="form-input"
                />
              </a-form-item>

              <a-form-item name="description" label="网站描述">
                <a-textarea
                  v-model:value="systemConfig.description"
                  placeholder="请输入网站描述"
                  :rows="3"
                  class="form-textarea"
                />
              </a-form-item>

              <a-form-item name="keywords" label="网站关键词">
                <a-input
                  v-model:value="systemConfig.keywords"
                  placeholder="请输入网站关键词，用逗号分隔"
                  class="form-input"
                />
                <div class="form-hint">多个关键词请用逗号分隔</div>
              </a-form-item>
            </div>

            <div class="form-actions">
              <a-button
                type="primary"
                @click="handleSaveBasicSettings"
                :loading="loading"
                class="save-button"
              >
                保存设置
              </a-button>
              <a-button
                style="margin-left: 16px"
                @click="handleCancelBasicSettings"
                class="cancel-button"
              >
                取消
              </a-button>
            </div>
          </a-form>
        </a-tab-pane>

        <a-tab-pane key="icp" tab="备案版权配置">
          <a-form
            :model="icpConfig"
            :rules="icpConfigRules"
            ref="systemConfigFormRef"
            layout="vertical"
            class="icp-config-form"
          >
            <div class="form-fields-container">
              <a-form-item name="icpNumber" label="ICP备案号">
                <a-input
                  v-model:value="icpConfig.icpNumber"
                  placeholder="请输入ICP备案号"
                  class="form-input"
                />
              </a-form-item>

              <a-form-item name="icpLicenseUrl" label="ICP备案证书链接">
                <a-input
                  v-model:value="icpConfig.icpLicenseUrl"
                  placeholder="请输入ICP备案证书链接"
                  class="form-input"
                />
              </a-form-item>

              <a-form-item name="showIcpNumber" label="显示ICP备案号">
                <a-switch v-model:checked="icpConfig.showIcpNumber" />
              </a-form-item>

              <a-form-item name="policeRecordNumber" label="公安备案号">
                <a-input
                  v-model:value="icpConfig.policeRecordNumber"
                  placeholder="请输入公安备案号"
                  class="form-input"
                />
              </a-form-item>

              <a-form-item name="policeLicenseUrl" label="公安备案证书链接">
                <a-input
                  v-model:value="icpConfig.policeLicenseUrl"
                  placeholder="请输入公安备案证书链接"
                  class="form-input"
                />
              </a-form-item>

              <a-form-item name="showPoliceRecordNumber" label="显示公安备案号">
                <a-switch v-model:checked="icpConfig.showPoliceRecordNumber" />
              </a-form-item>
              <a-form-item name="copyright" label="版权信息">
                <a-textarea
                  v-model:value="icpConfig.copyright"
                  placeholder="请输入版权信息"
                  :rows="2"
                  class="form-textarea"
                />
              </a-form-item>
            </div>

            <div class="form-actions">
              <a-button
                type="primary"
                @click="handleSaveIcpSettings"
                :loading="loading"
                class="save-button"
              >
                保存设置
              </a-button>
              <a-button
                style="margin-left: 16px"
                @click="handleCancelIcpSettings"
                class="cancel-button"
              >
                取消
              </a-button>
            </div>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { message } from "ant-design-vue";
import { settingApi } from "@/api/setting";

const loading = ref(false);
const activeTab = ref("basic");

// 表单引用
const systemConfigFormRef = ref();

// 系统配置数据
const systemConfig = reactive({
  siteName: "Gulu Blog",
  description: "专注于前端技术分享的博客",
  keywords: "Vue.js,React,JavaScript,前端开发",
  recordInfo: {
    icpLink: "https://beian.miit.gov.cn/",
    icp: "京ICP备12345678号-1",
    isShowIcp: true,
    beianLink: "http://www.beian.gov.cn/portal/registerSystemInfo",
    beian: "京公网安备12345678901234号",
    isShowBeian: true,
    company: "Gulu科技有限公司",
    isShowCompany: true,
    copyright: "© 2023 Gulu Blog. All rights reserved.",
    isShowCopyright: true,
  },
});
const icpConfig = reactive({
  icpNumber: "京ICP备12345678号-1",
  icpLicenseUrl: "https://beian.miit.gov.cn/",
  showIcpNumber: true,
  policeRecordNumber: "123456789012345678",
  policeLicenseUrl: "https://www.beian.gov.cn/portal/registerSystemInfo",
  showPoliceRecordNumber: true,
});
// 表单验证规则
const systemConfigRules = {
  siteName: [
    { required: true, message: "请输入网站名称", trigger: "blur" },
    {
      min: 1,
      max: 50,
      message: "网站名称长度在 1 到 50 个字符",
      trigger: "blur",
    },
  ],
  description: [
    { required: true, message: "请输入网站描述", trigger: "blur" },
    {
      min: 1,
      max: 200,
      message: "网站描述长度在 1 到 200 个字符",
      trigger: "blur",
    },
  ],
  keywords: [
    { required: true, message: "请输入网站关键词", trigger: "blur" },
    {
      min: 1,
      max: 200,
      message: "网站关键词长度在 1 到 200 个字符",
      trigger: "blur",
    },
  ],
};

const icpConfigRules = {
  icpNumber: [
    { required: false, message: "请输入ICP备案号", trigger: "blur" },
    {
      pattern: /^京ICP备\d{8}号(-\d+)?$/,
      message: "请输入有效的ICP备案号，格式如：京ICP备12345678号-1",
      trigger: "blur",
    },
  ],
  icpLicenseUrl: [
    {
      pattern: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/,
      message: "请输入有效的网址",
      trigger: "blur",
    },
  ],
  policeRecordNumber: [
    { required: false, message: "请输入公安备案号", trigger: "blur" },
  ],
  policeLicenseUrl: [
    {
      pattern: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/,
      message: "请输入有效的网址",
      trigger: "blur",
    },
  ],
  copyright: [
    { required: true, message: "请输入版权信息", trigger: "blur" },
    {
      min: 1,
      max: 200,
      message: "版权信息长度在 1 到 200 个字符",
      trigger: "blur",
    },
  ],
};

// 获取系统配置
const fetchSystemConfig = async () => {
  try {
    loading.value = true;
    const response = await settingApi.getSystemConfig();
    if (response.code === 200) {
      // 更新系统配置数据
      Object.assign(systemConfig, response.data);
      // 更新ICP配置数据
      Object.assign(icpConfig, response.data.recordInfo);
      message.success("系统配置加载成功");
    }
  } catch (error) {
    console.error("获取系统配置失败:", error);
    message.error("获取系统配置失败");
  } finally {
    loading.value = false;
  }
};

// 保存基础设置
const handleSaveBasicSettings = async () => {
  try {
    await systemConfigFormRef.value.validate();
    loading.value = true;
    const response = await settingApi.updateSystemConfig(systemConfig);
    if (response.code === 200) {
      message.success("基础设置保存成功");
    }
  } catch (error) {
    console.error("保存基础设置失败:", error);
    if (error.errorFields) {
      // 表单验证失败不显示错误提示
    } else {
      message.error("保存基础设置失败");
    }
  } finally {
    loading.value = false;
  }
};

// 取消基础设置
const handleCancelBasicSettings = () => {
  fetchSystemConfig();
};

// 保存ICP设置
const handleSaveIcpSettings = async () => {
  try {
    await systemConfigFormRef.value.validate();
    loading.value = true;
    // 将ICP配置合并到系统配置中保存
    const systemConfigData = {
      ...systemConfig,
      recordInfo: {
        ...systemConfig.recordInfo,
        ...icpConfig,
      },
    };
    const response = await settingApi.updateSystemConfig(systemConfigData);
    if (response.code === 200) {
      message.success("ICP备案配置保存成功");
    }
  } catch (error) {
    console.error("保存ICP备案配置失败:", error);
    if (error.errorFields) {
      // 表单验证失败不显示错误提示
    } else {
      message.error("保存ICP备案配置失败");
    }
  } finally {
    loading.value = false;
  }
};

// 页面加载时获取系统配置
onMounted(() => {
  fetchSystemConfig();
});
</script>

<style scoped>
.system-settings-container {
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  background-color: #f5f5f5;
  animation: fadeIn 0.5s ease-out;
}

.system-settings-header {
  margin-bottom: 24px;
  padding: 0 4px;
}

.system-settings-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
}

.system-settings-subtitle {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0;
}

.system-settings-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  transition: all 0.3s ease;
  overflow: hidden;
}

.system-settings-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.settings-tabs {
  padding: 24px;
}

.system-config-form,
.icp-config-form,
.security-config-form {
  width: 100%;
}

.form-fields-container {
  margin-bottom: 24px;
  max-width: 600px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 16px;
}

.form-row .ant-form-item {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.form-input {
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
  height: 40px;
  width: 100%;
}

.form-input:focus {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-textarea {
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
  resize: vertical;
  width: 100%;
}

.form-textarea:focus {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-input-number {
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
  width: 100%;
}

.form-hint {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.form-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 24px;
  margin-top: 32px;
  border-top: 1px solid #f0f0f0;
}

.save-button {
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border: none;
  transition: all 0.3s ease;
}

.save-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #40a9ff 0%, #69c0ff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.save-button:active:not(:disabled) {
  transform: translateY(0);
}

.cancel-button {
  height: 40px;
  font-size: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
  margin-left: 16px;
}

.cancel-button:hover {
  color: #1890ff;
  border-color: #1890ff;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .system-settings-container {
    padding: 16px;
  }

  .system-settings-header h2 {
    font-size: 20px;
  }

  .settings-tabs {
    padding: 16px;
  }

  .form-fields-container {
    max-width: 100%;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }

  .form-row .ant-form-item {
    width: 100%;
    margin-bottom: 16px;
  }

  .form-actions {
    flex-direction: column;
    gap: 12px;
  }

  .form-actions .ant-btn {
    width: 100%;
  }

  .cancel-button {
    margin-left: 0;
  }
}

/* 加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>